<template>
  <div class="background">
    <div class="container">
      <div ref="formbox" class="form-box">
        <!-- 注册 -->
        <div ref="registerbox" class="register-box hidden">
          <h1>register</h1>
          <input type="text" placeholder="用户名" v-model="registerform.userId">
          <input type="password" placeholder="密码" v-model="registerform.password">
          <input type="password" placeholder="确认密码" v-model="password0">
          <input type="text" placeholder="手机号" v-model="registerform.mobile">
          <input type="hidden" placeholder="注册日期" disabled="disabled" v-model="registerform.date">
          <button @click="register">注册</button>
        </div>
        <!-- 登录 -->
        <div ref="loginbox" class="login-box">
          <h1>login</h1>
          <input type="text" placeholder="用户名" v-model="loginform.id">
          <input type="password" placeholder="密码" v-model="loginform.password">
          <el-select v-model="logintype" class="m-2" placeholder="登录身份">
            <el-option
                v-for="item in typeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <button @click="login">登录</button>
        </div>
      </div>
      <div class="con-box left">
        <h2>欢迎来到<span>学車啦</span></h2>
        <p>快来<span>登录</span>你的专属账号吧</p>
        <img src="@/assets/login.png" alt="">
        <p>已有账号</p>
        <button @click="loginregister">去登录</button>
      </div>
      <div class="con-box right">
        <h2>欢迎来到<span>学車啦</span></h2>
        <p>快来<span>注册</span>你的专属账号吧</p>
        <img src="@/assets/login.png" alt="">
        <p>没有账号？</p>
        <button @click="registerlogin">去注册</button>
      </div>
    </div>
    <div class="FHZY" @click="FHSY"><p>首页</p></div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import router from "@/router";
import {ElMessage} from "element-plus";
import {getTeacherById, LoginTeacher} from "@/api/teacher";
import {getStudentById, InsertStudent, LoginStudent} from "@/api/student";
import {useStore} from 'vuex'
import {setTokenTime} from '@/utils/auth'

const store = useStore()

//初始化
const formbox = ref(null)
const registerbox = ref(null)
const loginbox = ref(null)
const logintype = ref('')
const password0 = ref('')
// 登陆类型
const typeoptions = [
  {
    value: '教练',
    label: '教练',
  },
  {
    value: '学员',
    label: '学员',
  }
]
// 获取当前时间
const UpData=()=>{
  const nowDate = new Date();
  const date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate(),
  }
  const newmonth = date.month>10?date.month:'0'+date.month
  const day = date.date>10?date.date:'0'+date.date
  return  date.year + '-' + newmonth + '-' + day
}
const registerform =ref({
  userId: '',
  password: '',
  mobile: '',
  date: UpData()
})
const loginform = ref({
  id: '',
  password: ''
})

//表单重置
const resetform = () =>{
  registerform.value = {
    userId: '',
    password: '',
    mobile: '',
    date: UpData()
  }
  loginform.value = {
    id: '',
    password: ''
  }
  logintype.value = ''
  password0.value = ''
}

//样式动画
const loginregister = () =>{
  formbox.value.style.transform='translateX(0%)';
  registerbox.value.classList.add('hidden');
  loginbox.value.classList.remove('hidden');
  resetform()
}
const registerlogin = () =>{
  formbox.value.style.transform='translateX(80%)';
  loginbox.value.classList.add('hidden');
  registerbox.value.classList.remove('hidden');
  resetform()
}

//登陆
const login = async () =>{
  if (loginform.value.id===''||loginform.value.password===''){
    ElMessage({
      showClose: true,
      message: '请输入用户名和密码',
      type: 'warning',
    })
  }else if (logintype.value===''){
    ElMessage({
      showClose: true,
      message: '请选择登录身份',
      type: 'warning',
    })
  }else if(logintype.value==='教练'){//————————————————————————————————————教练
    await LoginTeacher({
      id:('0-'+loginform.value.id),
      password:loginform.value.password
    }).then(res=>{
      if(res.code===20041){
        // console.log(res.data.status)
        if (res.data.status==='1'){
          ElMessage({
            message: '登陆成功',
            type: 'success',
          })
          //保存类型到VueX
          setTokenTime()
          store.dispatch('app/LoginType',logintype.value)
          store.dispatch('app/LoginId',res.data.id)
          store.dispatch('app/SetToken',res.data.token)
          getTeacherById(res.data.id).then(re=>{
            store.dispatch('app/SetLoginer',re.data)
          })

          router.replace('/index')
        }else {
          ElMessage({
            showClose: true,
            message: '用户正在审核中，请耐心等待通知...',
          })
        }
      }else {
        ElMessage.error('用户名或密码错误')
      }
    })
  }else {//————————————————————————————————————学员
    await LoginStudent({userId:('1-'+loginform.value.id),password:loginform.value.password}).then(res=>{
      if(res.code===20041){
        // console.log(res.data.status)
        ElMessage({
          message: '登陆成功',
          type: 'success',
        })
        //保存类型到VueX
        setTokenTime()
        store.dispatch('app/LoginType',logintype.value)
        store.dispatch('app/LoginId',res.data.id)
        store.dispatch('app/SetToken',res.data.token)
        getStudentById(res.data.id).then(re=>{
          store.dispatch('app/SetLoginer',re.data)
        })
        router.replace('/index')
      }else {
        ElMessage.error('用户名或密码错误')
      }
    })
  }
}
//注册
const register = async () =>{
  if (registerform.value.mobile === ''){
    ElMessage({
      showClose: true,
      message: '请输入注册信息',
      type: 'warning',
    })
  }else if (registerform.value.password !== password0.value){
    ElMessage({
      showClose: true,
      message: '两次密码输入不一致',
      type: 'warning',
    })
  }else {
    await InsertStudent({
      userId:('1-'+registerform.value.userId),
      password:registerform.value.password,
      mobile:registerform.value.mobile,
      date:registerform.value.date
    }).then(res=>{
      if(res.code === 20011){
        ElMessage({
          showClose: true,
          message: '注册成功,输入账号密码登录',
          type: 'success',
        })
        loginregister()
      }else {
        ElMessage({
          showClose: true,
          message: '注册失败，用户已存在',
          type: 'error',
        })
      }
    })
  }
}
const FHSY = () =>{
  router.replace('/index')
}
</script>

<style scoped>
.FHZY{
  height: 100px;
  width: 100px;
  background-color: #4da9ff;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50px,-50px);
  z-index: 1;
  color: white;
  font-size: 14px;
  border-radius: 50%;
  cursor: pointer;
}
.FHZY>p{
  position: absolute;
  bottom: 20%;
  right: 15%;
}
.FHZY:hover{
  height: 120px;
  width: 120px;
  transform: translate(-60px,-60px);
}
.FHZY:active{
  height: 110px;
  width: 110px;
  transform: translate(-55px,-55px);
}
:deep(.el-select){
  border: none;
  width: 70%;
  margin-top: 5px;
}

:deep(.el-input__wrapper){
  border: none;
  background-color: transparent;
}
:deep(.el-input__inner::placeholder),
:deep(.el-input__inner){
  color: #fff;
  font-weight: 600;
}
.background{
  margin: 0;
  padding: 0;
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg,#f3e7e9,#e3eeff);
}
.container{
  background-color: #fff;
  width: 650px;
  height: 415px;
  border-radius: 5px;
  /* 阴影 */
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1);
  /* 相对定位 */
  position: relative;
}
.form-box{
  /* 绝对定位 */
  position: absolute;
  top: -10%;
  left: 5%;
  /*background-color: #95b5ff;*/
  background: rgb(126, 161, 238);
  width: 320px;
  height: 500px;
  border-radius: 5px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  /* 动画过渡 加速后减速 */
  transition: 0.5s ease-in-out;
}
.register-box,.login-box{
  /* 弹性布局 垂直排列 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.hidden{
  display: none;
  transition: 0.5s;
}
h1{
  text-align: center;
  margin-bottom: 25px;
  /* 大写 */
  text-transform: uppercase;
  color: #fff;
  /* 字间距 */
  letter-spacing: 5px;
}
input{
  background-color: transparent;
  width: 70%;
  color: #fff;
  border: none;
  /* 下边框样式 */
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding: 10px 0;
  text-indent: 10px;
  margin: 8px 0;
  font-size: 14px;
  letter-spacing: 2px;
}
input::placeholder{
  color: #fff;
}
input:focus{
  color: #ffffff;
  outline: none;
  border-bottom: 1px solid rgba(112, 98, 173, 0.5);
  transition: 0.5s;
}
input:focus::placeholder{
  opacity: 0;
}
.form-box button{
  width: 70%;
  margin-top: 35px;
  background-color: #ffffff;
  outline: none;
  border-radius: 8px;
  padding: 13px;
  color: rgb(126, 161, 238);
  letter-spacing: 2px;
  border: none;
  cursor: pointer;
}
.form-box button:hover{
  background-color: #8a8cff;
  color: #ffffff;
  transition: background-color 0.5s ease;
}
.con-box{
  width: 50%;
  /* 弹性布局 垂直排列 居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 绝对定位 居中 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.con-box.left{
  left: -2%;
}
.con-box.right{
  right: -2%;
}
.con-box h2{
  color: #8e9aaf;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 4px;
}
.con-box p{
  font-size: 12px;
  letter-spacing: 2px;
  color: #8e9aaf;
  text-align: center;
}
.con-box span{
  color: rgb(126, 161, 238);

}
.con-box img{
  width: 150px;
  height: 150px;
  opacity: 0.9;
  margin: 40px 0;
}
.con-box button{
  margin-top: 3%;
  background-color: #fff;
  color: rgb(126, 161, 238);
  border: 1px solid rgb(126, 161, 238);
  padding: 6px 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  outline: none;
  cursor: pointer;
}
.con-box button:hover{
  background-color: rgb(126, 161, 238);
  color: #fff;
}

</style>